<template>
  <div class="CustomSelectTree_v">
    <vxe-pulldown ref="xDown3" destroy-on-close
                  @hide-panel="hidePanel"
                  class="custom_pull_down">
      <template #default>
        <div class="input_outer_warp" :class=" isShowPanel ? 'el-focus-color' : ''" @click="togglePanel">
          <span class="placeholder_class" v-if="checkedNodes.length === 0">{{ placeholder }}</span>
          <div v-else class="show_tags">
            <div class="tags_info">
              <span class="tags_text">{{ checkedNodes[0].name }}</span>
              <span class="tags_icon">
                <i class="el-icon-circle-close" @click.stop="closeTag(checkedNodes[0])"></i>
              </span>
            </div>
            <div class="tags_more" v-show="checkedNodes.length > 1">+{{ checkedNodes.length - 1 }}</div>
          </div>
          <i class="toggle_Icon"
             :class="isShowPanel ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
             @click.stop="togglePanel"
          ></i>
        </div>
      </template>
      <template #dropdown>
        <div class="customDropdown">
          <el-tree
              class="elTree"
              ref="elTree"
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-checked-keys="checkedKeys"
              @check-change="checkChange"
              :props="defaultProps">
            <span slot-scope="{ node, data }">
              <span class="info_title" :title="node.label">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>
import {httpRequest} from "@/untils/httpRequest";

export default {
  name: "CustomSelectTree",
  props: {
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      }
    },
    modelValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      isShowPanel: false,
      checkedNodes: [],
      treeData: [],
      checkedKeys: []
    };
  },
  methods: {
    togglePanel: function () {
      this.isShowPanel = !this.isShowPanel
      this.$refs.xDown3.togglePanel()
    },
    hidePanel: function () {
      this.isShowPanel = false
    },
    closeTag: function (row) {
      var _this = this
      this.checkedNodes = this.checkedNodes.filter(function (item) {
        return item.id !== row.id
      })
      this.checkedKeys = this.checkedKeys.filter(function (item) {
        return item !== row.id
      })
      if (row.children.length > 0) {
        row.children.map(function (item) {
          _this.closeTag(item)
        })
      }
      this.handleUpdateTreeNodes()
    },
    checkChange: function () {
      this.checkedNodes = this.$refs['elTree'].getCheckedNodes()
      this.checkedKeys = this.$refs['elTree'].getCheckedKeys()
    },
    handleUpdateTreeNodes: function () {
      if (this.$refs['elTree']) {
        this.$refs['elTree'].setCheckedKeys(this.checkedKeys)
        this.$refs['elTree'].setCheckedNodes(this.checkedNodes)
      }
    },
    //1. 获取tree数据(直接返回的是带children的层级结构) --- 暂时不用
    getTreeData: function () {
      return new Promise((resolve) => {
        httpRequest("post", "/component/getTreeData", null, null, "proxy").then((res) => {
          this.treeData = res.data.data[0].children;
          resolve();
        });
      });
    },
    //1. 带children的层级结构转化带parentId的数组 --- 暂时不用
    ChildrenToParentData: function (dataSource, newId, result) {
      var _this = this;
      if (!result) {
        result = [];
      }
      dataSource.map(function (item) {
        if (item.type === "outer") {
          item.parentId = null;
        } else if (newId) {
          item.parentId = newId;
        }
        result.push(item);
        if (item.children.length > 0) {
          item.children.map(function (sonItem) {
            sonItem.parentId = item.id;
            result.push(sonItem);
            if (sonItem.children.length > 0) {
              _this.ChildrenToParentData(sonItem.children, sonItem.id, result);
            }
          });
        }
      });
      return result;
    },
  },
  watch: {
    checkedKeys: {
      handler(v) {
        this.$emit('get-checked-keys', v)
      }
    },
    checkedNodes: {
      handler(v) {
        this.$emit('get-checked-nodes', v)
      }
    },
    modelValue: {
      deep: true,
      handler(v) {
        this.checkedKeys = v
        if (v.length === 0) {
          this.checkedNodes = []
        }
      }
    }
  },
  mounted() {
    this.getTreeData()
  }
};
</script>

<style>
.CustomSelectTree_v {
  width: 100%;
}

.custom_pull_down {
  width: 100%;
}

.input_outer_warp {
  width: 100%;
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-focus-color {
  border-color: #409eff;
}

.show_tags {
  width: 94%;
  height: 90%;
  overflow: hidden;
  padding: 2px;
  display: flex;
  align-items: center;
}

.tags_info {
  max-width: 60%;
  height: 100%;
  border: 1px solid #e9e9eb;
  background-color: #f4f4f5;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tags_text {
  width: 90%;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tags_icon {
  margin-right: 4px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.tags_more {
  width: 35px;
  height: 100%;
  margin-left: 5%;
  border: 1px solid #e9e9eb;
  background-color: #f4f4f5;
  border-radius: 4px;
  padding: 1px 2px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toggle_Icon {
  color: #DCDFE6;
  cursor: pointer;
}

.customDropdown {
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  margin: 3px 0;
}
</style>